<template>
    <view class="yzm-mask" v-if="slideCode.show" @click.self="close()">
        <view class="yzm-box">
            <!-- <view class="flex-row-between align-center">
                <view :class="['msg', msgColor]">{{msg}}</view>
                <view class="close">
                    <uni-icons type="closeempty" style="color:#A6A6A6" size="22" @click="close()"></uni-icons>
                </view>
            </view> -->
            <view class="" style="text-align: right;margin-bottom: 10rpx;">
                <!-- <text>拖动下方滑块完成拼图</text>
                <text @click="refresh()">刷新</text> -->
                <uni-icons type="refreshempty" @click="refresh()" size="24" color="#adadad"></uni-icons>
                <uni-icons type="closeempty" size="24" @click="close()" color="#adadad"></uni-icons>
            </view>
            <movable-area>
                <view id="msg" v-if="codePic === ''">{{msgText}}</view>
                <view id="pic" v-else :style="{'background-image': 'url('+codePic+')'}"></view>
                <view id="line"></view>
                <movable-view :x="x" :animation="false" direction="horizontal" @change="onChange" @touchend="touchEnd">
                    <view class="huakuai" :class="{shake:shakeing==true}">
                        <view class="pt2"></view>
                        <view :class="[error ? 'red': 'blue']"></view>
                    </view>
                </movable-view>
                <movable-view :x="targetX" :animation="false" :disabled="true" direction="horizontal">
                    <view class="pt1"></view>
                </movable-view>
            </movable-area>

        </view>
    </view>
</template>
<script>
    export default {
        props: {
            value: {
                type: Object,
                default: {
                    session_id: "",
                    yanzheng: "",
                    x: 0,
                    show: false
                }
            },
        },
        data() {
            return {
                error: false,
                errNum: 0,
                codePic: "", //主图
                targetX: 10, //滑动目标位置
                x: 10, //当前的位置
                msg: '安全验证', //提示信息
                msgColor: '',
                msgText: '加载中',
                huadong: false, //是否已经滑动
                shakeing: false,
                slideCode: {
                    session_id: "",
                    yanzheng: "",
                    x: 0,
                    show: false
                },
                picArr: [
                    "https://www.global3pro.com/public/static/images/slide-code/1.jpeg",
                    "https://www.global3pro.com/public/static/images/slide-code/2.jpeg",
                    "https://www.global3pro.com/public/static/images/slide-code/3.jpeg",
                    "https://www.global3pro.com/public/static/images/slide-code/4.jpeg",
                ]
            };
        },
        mounted() { //该组件被挂载到实例上去之后调用
            this.init();
            this.refresh();
            //#ifdef H5
            if (this.$isPc === true) { //PC端
                document.body.addEventListener('mouseup', this.touchEnd); //鼠标抬起事件
            }
            //#endif
        },
        beforeUnmount() { //实例销毁之前调用。在这一步，实例仍然完全可用
            //#ifdef H5
            if (this.$isPc === true) { //PC端
                document.body.removeEventListener('mouseup', this.touchEnd); //鼠标抬起事件
            }
            //#endif
        },
        methods: {
            //随机数
            getRandomNunber(start, end) {
                return Math.floor(Math.random() * (end - start) + start)
            },
            init() {
                //图形滑块验证码
                //组件被挂载到实例上去之后，生成几个父页面变量
                this.slideCode.session_id = this.getRandomNunber(0, 999999999); //唯一id
                this.slideCode.yanzheng = false; //图形验证码是否验证通过
                this.slideCode.x = 0 //图形验证码的水平偏移值
                this.slideCode.show = false;
                this.$emit("input", this.slideCode);
            },
            open() {
                this.init();
                this.refresh();
                this.slideCode.show = true;
                this.$emit("input", this.slideCode);
            },
            close() {
                this.slideCode.show = false;
            },
            success() {
                this.errNum = 0;
                this.slideCode.yanzheng = true //验证通过
                this.slideCode.x = parseInt(this.x * (679 / uni.upx2px(550))) //偏移值
                this.$emit("input", this.slideCode);
                this.$emit("success", this.slideCode);
                this.refresh() //获取验证码
            },
            refresh() {
                let picIdx = this.getRandomNunber(0, this.picArr.length);
                this.error = false
                this.huadong = false
                this.errNum = 0;
                this.codePic = this.picArr[parseInt(picIdx)];
                this.targetX = this.getRandomNunber(100, 279);
                // this.targetX = 300
                this.x = 10;
                // console.log(this.targetX, this.codePic, picIdx);
            },
            onChange(e) { //拖动过程中触发、
                if (e.detail.source === 'touch') { //只有是手动触发的，才执行
                    this.huadong = true
                    this.x = e.detail.x
                }
            },
            shake() { //抖动 【总耗时 500ms】
                if (this.huadong) {
                    return
                } //如果在拖动中，就不执行了
                this.shakeing = true;
                setTimeout(() => {
                    this.shakeing = false;
                    this.x = 10;
                }, 500);
            },
            touchEnd() { //手指离开了
                if (this.huadong === true) { //只有拖动过后松开，才会触发，当然这个主要是应对pc端的（pc端是监听body的松开），移动端没这问题
                    // this.msg = '验证中...'
                    // this.msgColor = ''
                    if (this.x >= this.targetX - 10 && this.x <= this.targetX + 10) {
                        this.success();
                        // this.msg = '验证成功'
                        // this.msgColor = 'green'
                        this.close()
                    } else {
                        this.error = true
                        setTimeout(() => {
                            this.refresh()
                        }, 500)


                        // this.errNum++;
                        // this.huadong = false; //没有在拖动中了
                        // this.shake() //抖动
                        // this.msg = "验证失败"
                        // this.msgColor = 'red'
                        // console.log(this.errNum)
                        // if (this.errNum > 5) {
                        //     this.msg = '验证失败次数过多，已重新获取'
                        //     setTimeout(() => {
                        //         this.refresh();
                        //         this.errNum = 0;
                        //     }, 1500);
                        // } else {
                        //     setTimeout(() => {
                        //         this.msg = '安全验证'
                        //         this.msgColor = ''
                        //     }, 3500);
                        // }
                    }
                }
            },
        },
    }
</script>
<style lang="scss" scoped>
    .yzm-mask {
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        z-index: 999;
        width: 750rpx;
        height: 100vh;

        .yzm-box {
            background: #FFF;
            width: 679rpx;
            position: absolute;
            top: 30%;
            left: 35rpx;
            padding: 20rpx 25rpx 30rpx 25rpx;
            box-sizing: border-box;
            border-radius: 15rpx;

            .msg {
                color: #999;
                font-size: 24rpx;

                &.red {
                    color: red;
                }

                &.green {
                    color: green;
                }
            }

            .close {
                top: 20rpx;
                right: 20rpx;
                color: #A6A6A6;
                font-size: 24rpx;
            }

            .title {
                font-size: 28rpx;
                line-height: 38rpx;
                color: #333;
                margin: 0 0 7rpx 0;
            }

            movable-area {
                width: 100%;
                height: auto;

                #msg {
                    width: 100%;
                    line-height: 310rpx;
                    text-align: center;
                    font-size: 30rpx;
                    color: #999;
                    background: #F8F8F8;
                }

                #pic {
                    width: 100%;
                    height: 310rpx;
                    background-color: #F8F8F8;
                    background-size: 100% 310rpx;
                    position: relative;
                }

                #line {
                    background: #e4e4e4;
                    width: 100%;
                    height: 20rpx;
                    margin: 42rpx 0 15rpx 0;
                    border-radius: 50rpx;
                    display: inline-block;
                }

                movable-view {
                    width: 72rpx;
                    height: 310rpx;

                    .huakuai {
                        position: absolute;
                        padding-top: 100rpx;
                        box-sizing: border-box;
                        height: 310rpx;
                    }

                    .pt1 {
                        position: absolute;
                        top: 100rpx;
                        left: -20rpx;
                        width: 90rpx;
                        height: 80rpx;
                        background: url(./pt1.png);
                        background-size: 100% 100%;
                    }

                    .pt2 {
                        position: absolute;
                        top: 100rpx;
                        left: -20rpx;
                        width: 90rpx;
                        height: 80rpx;
                        background: url(./pt2.png);
                        background-size: 100% 100%;
                        opacity: 0.7;
                    }

                    .blue {
                        box-shadow: rgba(26, 101, 255, 0.52) 0px 0px 10px 1px;
                        width: 100rpx;
                        height: 50rpx;
                        border-radius: 50rpx;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: rgb(26, 101, 255) url() no-repeat;
                        background-size: auto 20rpx;
                        background-position: 50% 50%;
                        margin: 25rpx 0 0 -14rpx;
                    }

                    .red {
                        box-shadow: #ed17139c 0px 0px 10px 1px;
                        width: 100rpx;
                        height: 50rpx;
                        border-radius: 50rpx;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: #ed1713 url() no-repeat;
                        background-size: auto 20rpx;
                        background-position: 50% 50%;
                        margin: 25rpx 0 0 -14rpx;
                    }
                }
            }
        }
    }

    @keyframes animated-shake {
        0% {
            left: 10rpx;
        }

        20% {
            left: -10rpx;
        }

        40% {
            left: 10rpx;
        }

        60% {
            left: -10rpx;
        }

        80% {
            left: 10rpx;
        }

        100% {
            left: -10rpx;
        }
    }

    .shake {
        animation: animated-shake 0.5s;
    }
</style>
